<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>求和</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .content{
            width: 520px;
            margin: 0 auto;            
        }
    </style>
</head>

<body>
    <div class="content">
        <input type="text" name="" id="txt" value="1,2,3,4"> <span>输入数字求和，数字之间用半角“,”号分隔</span>
        <button id="btn">求和</button> <span id="sum"></span>
    </div>

    <script>
        var btn = document.getElementById('btn')
        var sum = document.getElementById('sum')

        btn.onclick = function(){
            var sum = 0
            console.log(document.getElementById('txt').value.split(","));
            var arr = document.getElementById('txt').value.split(",")
            for(var i in arr){
                sum += parseInt(arr[i])
                // console.log(sum);                
            }
            document.getElementById('sum').innerHTML = sum
        }

    </script>

</body>

</html>